<template>
  <div :style="`min-height: ${pageMinHeight}px`">
    <a-carousel arrows autoplay style="margin: 0 -24px">
      <div
        slot="prevArrow"
        slot-scope="{}"
        class="custom-slick-arrow"
        style="left: 10px; zindex: 1"
      >
        <a-icon type="left-circle" />
      </div>
      <div
        slot="nextArrow"
        slot-scope="{}"
        class="custom-slick-arrow"
        style="right: 10px"
      >
        <a-icon type="right-circle" />
      </div>
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
    </a-carousel>
    <div class="card-container">
      <a-tabs
        type="card"
        default-active-key="1"
        @change="callback"
        class="outer-tabs"
      >
        <a-tab-pane key="1">
          <span slot="tab">
            <a-icon type="home" />
            我的工作台
          </span>
          <a-row style="margin-top: 0" :gutter="16">
            <a-col :xl="18" :lg="24" :md="24" :sm="24" :xs="24">
              <a-card
                :loading="loading"
                :bordered="false"
                style="height: calc(100vh - 250px)"
              >
                <a-tabs default-active-key="1" class="middle-tabs">
                  <a-tab-pane key="todo" tab="我的待办">
                    <a-tabs default-active-key="3" class="inner-tabs">
                      <a-tab-pane key="1" tab="发件与督办 6">
                        <a-skeleton />
                      </a-tab-pane>
                      <a-tab-pane key="2" tab="研发任务 6">
                        <a-skeleton />
                      </a-tab-pane>
                      <a-tab-pane key="3">
                        <div slot="tab" style="display: flex">
                          <div>工程规划&nbsp;3</div>
                          <div
                            class="circle-icon"
                            style="margin-left: 10px; margin-top: -7px"
                          >
                            3
                          </div>
                        </div>
                        <a-list item-layout="horizontal" :data-source="data">
                          <a-list-item slot="renderItem" slot-scope="item">
                            <a-button slot="actions" style="width: 98px">
                              处理
                            </a-button>
                            <a-list-item-meta>
                              <a slot="title" style="font-weight: 400">
                                {{ item.title }}
                              </a>
                              <a-tag
                                slot="avatar"
                                color="#F54A45"
                                style="margin-left: 14px"
                              >
                                今日
                              </a-tag>
                            </a-list-item-meta>
                            <span class="time-span">2024-09-02</span>
                          </a-list-item>
                        </a-list>
                      </a-tab-pane>
                    </a-tabs>
                  </a-tab-pane>
                  <a-tab-pane key="create">
                    <span slot="tab">
                      我的创建 &nbsp;
                      <a-tooltip title="What do you want others to call you?">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                  </a-tab-pane>
                  <a-tab-pane key="done">
                    <span slot="tab">
                      我已处理 &nbsp;
                      <a-tooltip title="What do you want others to call you?">
                        <a-icon type="question-circle-o" />
                      </a-tooltip>
                    </span>
                  </a-tab-pane>
                </a-tabs>
              </a-card>
            </a-col>
            <a-col :xl="6" :lg="24" :md="24" :sm="24" :xs="24">
              <a-card title="功能列表" style="height: calc(100vh - 250px)">
                <a-skeleton :paragraph="{ rows: 8 }" />
              </a-card>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2">
          <span slot="tab">
            <a-icon type="setting" />
            我的仪表盘
          </span>
          <a-skeleton />
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";

const data = [
  {
    title: "【规划拆分】2024 年信创转型工程",
  },
  {
    title: "【任务拆分】2024 年信创转型工程",
  },
  {
    title: "【调查反馈】2024 年信创转型工程",
  },
];

export default {
  name: "ehome",
  data() {
    return {
      data,
      desc: "这是一个演示页面",
    };
  },
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
  },
  methods: {
    callback() {
      console.log("tab change");
    },
  },
};
</script>
<style scoped lang="less">
@import "index";
</style>
